<template>
	<view class="backlog">
		<!-- <u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" title="待办" leftIconColor="#FFF"
			@rightClick="rightClick" :autoBack="true"  >
		</u-navbar> -->
		<u-tabs :list="list" :lineWidth="40" @change="changeTabs"></u-tabs>


		<u-transition :show="show" mode='fade-left'>
			<view class="transition" v-if="show">

				<view class="list" v-if="!(listData==null || listData.length==0)">
					<view class="item" v-for="(item,index) in listData">
						<view class="title" :class="item.is_reading==0?'signTitle':''">
							您发布的<text style="color: #26A2FF;"
								@click="gotoPublishContent(item.id)">《{{item.title.length>12?item.title.slice(0,12)+'...':item.title}}》</text>审核失败，失败原因：{{item.examine}}
						</view>
						<view class="time">
							{{item.createtime}}
						</view>
					</view>
				</view>
				<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" marginTop='400rpx'>
				</u-empty>
			</view>
		</u-transition>
		<u-transition :show="!show" mode='fade-right'>
			<view v-if="!show">
				<view class="auditStatusList">
					<view class="auditStatusItem" :class="index==auditIndex?'active':''"
						v-for="(item,index) in auditStatus" @tap.stop='changeAudit(index)'>
						{{item}}
					</view>
				</view>

				<view class="transition">



					<view class="notList" v-if="!(listData==null || listData.length==0)">

						<view class="item" v-for="(item,index) in listData" @tap.stop="gotoNewsDetail(item.id)">
							<view class="title ">
								{{item.title}}
							</view>
							<view class="desc">
								<u-parse :content="item.content"></u-parse>
							</view>
							<view class="personalMsg">
								<view class="personalMsgImg">
									<image :src="item.avatar" mode="widthFix"></image>
								</view>
								<view class="time" style="margin-left: 10rpx;">
									<text>{{item.nickname}}</text>
									<text class="line"></text>
									<text>{{item.createtime}}</text>
								</view>
							</view>

							<u-line v-if="auditIndex==2" dashed margin="30rpx 0 0 0"></u-line>

							<view v-if="auditIndex!=0" class="failTime"
								:style="{color:auditIndex==2?'#fc8b00':auditIndex==1?'#26A2FF':''}">
								<text>{{item.createtime}}</text>
								<text style="margin-left: 10rpx;">
									{{
									auditIndex==2?'审核失败':
									item.status==0?'草稿':
									item.status==1?'已通过':
									item.status==2?'审核通过':
									item.status==3?'待审批（校长审核审核会议）':
									item.status==21?'会议室驳回':
									item.status==31?'校长驳回':
									item.status==9?'会议结束':'未知状态'
								}}
								</text>
							</view>

							<view v-if="auditIndex==2" class="failDesc">
								{{item.examine}}
							</view>

							<view v-if="auditIndex==0 && isExamine" class="btnBox">
								<view class="" style="margin-left: auto;">
									<view @tap.stop="btnEvent(1,item.id)" style="display: inline-block;">
										<u-button class="buttonWidth" type="primary" text="通过"></u-button>
									</view>
									<view @tap.stop="btnEvent(0,item.id)"
										style="display: inline-block;margin-left: 30rpx;">
										<u-button class="buttonWidth" type="primary" :plain="true" text="拒绝"></u-button>
									</view>
								</view>
							</view>

						</view>

					</view>
					<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" marginTop='400rpx'>
					</u-empty>

				</view>
			</view>

		</u-transition>
		<u-popup :show="showPopup" @close="closePopup" @open="openPopup" mode='center'>
			<view class="popupBox">
				<view class="popupTitle">
					拒绝理由
				</view>
				<view class="popupText">
					<u--textarea v-model="textareaValue" placeholder="请输入拒绝理由" focus confirmType='done' :maxlength='-1'
						height='200rpx'></u--textarea>
				</view>
				<view class="popupBtn">
					<u-button text="取消" @click="showPopup=false,textareaValue=''"></u-button>
					<u-button text="提交" @click="chackSubmit"></u-button>
				</view>

			</view>
		</u-popup>
		<myTabBar :list='tabList' :currentIndex="1"></myTabBar>
	</view>
</template>

<script>
	import myTabBar from '@/component/customTabBar/customTabBar.vue'
	import {
		footprintMine,
		footprintExamine
	} from '@/api/schoolEventApi.js'
	export default {
		components: {
			myTabBar
		},
		data() {
			return {
				show: true,
				tabList: [
					{title: "首页",
						url: "/pages/tabbar-5-detial/schoolEvent/schoolEvent",
						icon: "home"
					},
					{
						title: "待办",
						url: "/pages/tabbar-5-detial/backlog/backlog",
						icon: "chat"
					},
					{
						title: "草稿",
						url: "/pages/tabbar-5-detial/draft/draft",
						icon: "edit-pen"
					},
					{
						title: "我的发布",
						url: "/pages/tabbar-5-detial/myPublish/myPublish",
						icon: "file-text"
					},
					{
						title: "清外足迹",
						url: "/pages/tabbar-5-detial/schoolEvent/footConfig",
						icon: "file-text"
					}
				],
				list: [{
						name: '待修改'
					},
					{
						name: '待审核'
					},
				],
				auditStatus: ["待审核", "已审核", "未通过"],
				auditIndex: 0,
				listData: [],
				status: 3,
				showPopup: false,
				textareaValue: '',
				activeId: '',
				isExamine: false
			}
		},
		onShow() {
			console.log('onShow')
			this.getListData();
		},
		methods: {
			gotoPublishContent(id) {
				uni.navigateTo({
					url: '/pages/tabbar-5-detial/schoolEvent/publishContent/publishContent?id=' + id
				});
			},

			gotoNewsDetail(id) {

				let pageType = this.auditIndex == 2 ? 2 : this.auditIndex == 0 ? 4 : 0;

				uni.navigateTo({
					url: `/pages/tabbar-5-detial/schoolEvent/newsDetail/newsDetail?pageType=${pageType}&id=${id}`
				});


			},
			getListData() {
				this.listData = [];
				let params = {
					status: this.status
				};
				uni.showLoading({
					title: '加载中'
				});
				footprintMine(params).then(res => {
					console.log(res)
					uni.hideLoading();
					if (res.code == 1) {
						res.data.list.data.forEach((item, index) => {
							if (item.diagram == null) item.diagram = [];
						})
						this.isExamine = res.data.is_examine;
						this.listData = res.data.list.data;
						// this.lastPage = res.last_page;
						console.log(this.listData)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},

			changeTabs(e) {
				if (e.index == 0) {
					this.show = true;
					this.status = 3;
				}
				if (e.index == 1) {
					this.show = false;
					if (this.auditIndex == 0) this.status = 0;
					else if (this.auditIndex == 1) this.status = 2;
					else if (this.auditIndex == 2) this.status = 3;
					// this.status = this.auditIndex;
				}
				this.getListData();
			},

			changeAudit(index) {
				this.auditIndex = index;
				// this.status = index;
				if (index == 0) this.status = 0;
				else if (index == 1) this.status = 2;
				else if (index == 2) this.status = 3;
				console.log(index)
				this.getListData();
			},

			openPopup() {

			},

			closePopup() {

			},

			btnEvent(type, id) {

				if (!this.isExamine) {
					uni.showToast({
						title: '无权限操作',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				if (type == 1) {
					console.log("通过")
					this.subimtExamine(2, id);
				}
				if (type == 0) {
					console.log("拒绝")
					this.showPopup = true;
				}
				this.activeId = id;
			},

			chackSubmit() {
				this.showPopup = false;
				this.subimtExamine(3, this.activeId);
			},


			subimtExamine(status, id) {
				let params = {
					article_id: id,
					status: status,
					examineDesc: this.textareaValue
				};
				uni.showLoading({
					title: '提交中'
				});
				footprintExamine(params).then(res => {
					console.log(res)
					uni.hideLoading();
					if (res.code == 1) {
						this.getListData();
						this.textareaValue = '';
					}
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: "none"
					});
				})
			},


		}
	}
</script>

<style>
	image {
		width: 100%;
	}

	.backlog {
		background: #f8f8f8;

		width: 100%;
		min-height: 100vh;
	}

	.backlog a {
		text-decoration: none;
	}

	.backlog /deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}

	.backlog /deep/.u-tabs__wrapper__nav__line {
		bottom: 0;
	}

	.transition {
		padding: 24rpx;
	}

	.item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 28rpx;
		padding-left: 0;
		margin-bottom: 20rpx;
	}

	.title {
		padding-left: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		display: -webkit-box;
		/* 对象作为伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 2;
		/* 显示的行数 */
	}

	.signTitle {
		position: relative;
	}

	.signTitle::before {
		content: "";
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		position: absolute;
		left: 12rpx;
		top: 18rpx;
		background-color: #fc8b00;
	}

	.time {
		margin-top: 20rpx;
		color: #aaa;
		font-size: 28rpx;
		padding-left: 32rpx;

	}

	.failTime {
		font-size: 28rpx;
		color: #50b156;
		margin-top: 30rpx;
	}

	.auditStatusList {
		display: flex;
		background-color: #fff;
		padding: 32rpx 0;
	}

	.auditStatusItem {
		font-size: 28rpx;
		color: #999;
		padding: 8rpx 20rpx;
		background-color: #eaeaea;
		border-radius: 50rpx;
		margin-left: 28rpx;
		border: 2rpx solid #eaeaea;
	}

	.auditStatusItem.active {
		background-color: #fff;
		color: #26A2FF;
		border-color: #26A2FF;
	}

	.notList .item {
		padding: 28rpx;
	}

	.notList .title {
		padding: 0;
	}

	.notList .time {
		padding: 0;
		margin-top: 0;
	}

	.notList .desc {
		font-size: 28rpx;
		color: #666;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		display: -webkit-box;
		/* 对象作为伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 1;
		/* 显示的行数 */
	}

	.personalMsg {
		display: flex;
		align-items: center;
	}

	.personalMsgImg {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #F8F8F8;
	}

	.line {
		margin: 0 16rpx;
		width: 2rpx;
		height: 20rpx;
		background-color: #aaa;
		display: inline-block;
	}

	.failDesc {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		display: -webkit-box;
		/* 对象作为伸缩盒子模型显示 */
		-webkit-box-orient: vertical;
		/* 设置或检索伸缩盒对象的子元素的排列方式 */
		-webkit-line-clamp: 2;
		/* 显示的行数 */
	}

	.btnBox {
		display: flex;
		margin-top: 16rpx;
	}

	.buttonWidth {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 16rpx;
		display: inline-block;
		/* margin-left: 30rpx; */
	}

	.popupBox {
		width: 640rpx;
		/* height: 460rpx; */
		background-color: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		position: fixed;
		top: 50%;
		left: 50%;
		/* z-index: 99; */
		transform: translate(-50%, -50%);
	}

	.popupTitle {
		font-weight: 600;
		text-align: center;
		padding: 32rpx 0;
		font-size: 38rpx;
	}

	.popupText {
		padding: 0 24rpx;
	}

	.popupText /deep/.u-textarea {
		background-color: #F8F8F8;
	}

	.popupBtn {
		display: flex;
		margin-top: 40rpx;
		/* padding: 20rpx 0; */
		background-color: #fff;
		border-radius: 16rpx;
	}

	.popupBox /deep/.u-button--info {
		border: none;
		border-radius: 0;
		padding: 50rpx 0;
	}

	.popupBox /deep/uni-button:last-child:after {
		border-left: none;
	}

	.popupBox /deep/uni-button:after {
		border-radius: 0;
	}

	.popupBox /deep/.u-button__text {
		font-size: 32rpx !important;
		font-weight: 600;
	}

	.popupBox /deep/.u-button--info:last-child .u-button__text {
		color: #1050e3;
	}
</style>
